<template>
  <a-content placeholder="姓名/邮箱">
    <template #search>
      <CustomSearch :filterList="state.columns" />
    </template>
    <template #operate>
      <a-button type="primary" @click="state.open = true">新增教授</a-button>
    </template>
    <Table ref="tableRef" :column-sort="columnSort" :columns="state.columns" :data="tableData" v-model:page="req.current" v-model:size="req.size" @checkbox-change="checkboxChange" @page="getList">
      <template #face="dataRow">
        <Image :src="dataRow?.row?.face" />
      </template>
      <template #name="dataRow">
        <span class="cp" v-if="dataRow.row.id === '99'" @click="toDetailed(dataRow?.row)">抽屉模式</span>
        <span class="cp" v-if="dataRow.row.id === '97'" @click="toWindow(dataRow?.row)">
          <router-link :to="`/professorDetailed/${dataRow.row.id}`" target="_blank" class="color-primary">新窗口模式</router-link>
        </span>
      </template>
      <template #tag="dataRow">
        <Tag :type="cooperationStageOption.useEnumItem(dataRow.row.cooperationStage)?.type">
          {{ cooperationStageOption.useEnumItem(dataRow.row.cooperationStage)?.label }}
        </Tag>
      </template>
      <template #operate="dataRow">
        <button type="button" @click="state.open = true">编辑</button>
        <button type="button" @click="state.openPassword = true">密码</button>
        <button type="button">更多</button>
      </template>
    </Table>
  </a-content>
  <ModalForm v-model:open="state.open" title="新增教授" width="1000px" />
  <ModalPassword v-model:open="state.openPassword" title="重置密码" />
  <Detailed v-model:open="state.openDetailed" />
</template>
<script lang="ts" setup>
  import { ref, reactive, Ref, onMounted } from "vue"
  import Detailed from "../detailed/index.vue"
  import { useRouter } from "vue-router"
  import { useTable, useTabMenu, useSelectAsync } from "@/hook/index"
  import { useColumns } from "./column"
  /**
   * api
   */
  import { professorList } from "@/api/index"
  /**
   * 组件
   */
  import Table from "@/components/table/index.vue"
  import Image from "@/components/image/index.vue"
  import SelectAsync from "@/components/selectAsync/index.vue"
  import Select from "@/components/select/index.vue"
  import ModalForm from "../components/form/index.vue"
  import ModalPassword from "../components/password/index.vue"
  import CustomSearch from "../components/customSearch/index.vue"
  import Tag from "@/components/tag/index.vue"
  /**
   * vxe-table配置
   */
  import type { RowVO } from "./interface"
  /**
   * 字典逻辑
   */
  import { useEnum } from "@/enum/index"
  // 合作阶段
  const cooperationStageOption = useEnum("cooperationStageModule")
  // 支持讲座
  const supportingLecturesOption = useEnum("supportingLecturesModule")
  // 教师级别
  const teacherLevelOption = useEnum("teacherLevelModule")
  // 是与否
  const whetherOption = useEnum("whetherModule")
  /**
   * hook
   */
  const tableRef: Ref<HTMLElement | null> = ref(null)
  const tableElement: Ref<HTMLElement> = tableRef as Ref<HTMLElement>
  const router = useRouter()
  const { useSetTotal, useLoading, useSetCellInnerPrimary, useSetHeight, usePage, useSize } = useTable(tableElement)
  const { useSetTabMenuName } = useTabMenu()
  const { columns } = useColumns()
  /**
   * select异步请求数据
   */
  const { useGetCountryOptions } = useSelectAsync()
  /**
   * state
   */

  // reactive
  const state = reactive<any>({
    showSearchItem: false,
    open: false,
    openPassword: false,
    openDetailed: false,
    columns: [],
    renderTable: false,
  })
  // ref
  const tableData = ref<RowVO[]>([])
  const toDetailed = (row: any): void => {
    state.openDetailed = true
    // useSetTabMenuName(row.name)
    // router.push({
    //   path: "/professorDetailed/" + row.id,
    // })
  }

  const toWindow = () => {}

  // 获取数据
  /**
   * 列表请求参数
   */
  const req = reactive<any>({
    current: usePage,
    size: useSize,
    model: {},
  })
  const getList = (params?: {}) => {
    useLoading(true)
    professorList(req)
      .then((res) => {
        tableData.value = res.records
        useLoading(false)
        useSetTotal(res.total)
        nextTick(() => {
          state.columns = columns
        })
      })
      .catch(() => {
        useLoading(false)
      })
  }
  // 搜索
  const search = () => {}
  // 重置
  const searchRef: Ref<HTMLElement | null> = ref(null)
  const searchElement: Ref<HTMLElement> = searchRef as Ref<HTMLElement>
  const reset = () => {
    searchElement.value?.reset()
    search()
  }

  const columnSort = (data: []) => {
    return new Promise<void>((resolve, reject) => {
      setTimeout(() => {
        resolve()
      }, 2000)
    })
  }

  onMounted(() => {
    getList()
  })

  const checkboxChange = (row: object) => {
    console.log("row", row)
  }
</script>
